<template>
  <div>

    <form action="/">
      <van-search placeholder="请输入搜索关键词"
                  v-model="value"
                  readonly
                  @click="toSearch"
      />
    </form>
    <van-swipe :autoplay="5000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" height="200px"/>
      </van-swipe-item>
    </van-swipe>
    <van-notice-bar mode="closeable" left-icon="volume-o">
     {{notice}}
    </van-notice-bar>

    <section class="h-hot-panel">
      <h2 class="h-hot">热门文章
        <van-icon name="fire" color="red" size="15px"></van-icon>
      </h2>
        <van-list>
          <van-cell
            v-for="(hot,index) in hotList">
            <a :href="hot.link">
              <van-tag class="h-hot-tag" color="red">{{index+1}}</van-tag>
              <span class="h-hot-text">{{hot.value}}</span>
            </a>
          </van-cell>
        </van-list>
    </section>
    <!--推荐文章-->
    <section class="h-recommend-articles">
      <van-list
        :finished="finished"
        finished-text="没有更多了"
      >
        <van-cell
          v-for="article in recommendArticleList">
          <section class="article">
            <img v-lazy="article.img" class="thumb"/>
            <section class="article-left">
              <section class="article-title">
                <van-tag round type="danger">{{article.label}}</van-tag>
                <b>{{article.title}}</b>
              </section>
              <section class="meta">
                <van-icon name="eye-o"></van-icon>
                <span class="see">9999阅读</span>
                <!--<a href="javascript:">-->
                  <!--<van-icon name="user-o"/>-->
                  <!--疯子阿程213213-->
                <!--</a>-->
                <a href="javascript:" class="zan f-right">
                  <van-icon name="thumb-circle-o"></van-icon>
                  <span>999赞</span>
                </a>

              </section>
            </section>

          </section>
        </van-cell>
      </van-list>



    </section>

  </div>

</template>

<script>
  import {mapGetters} from 'vuex'

  import image1 from '../../assets/images/image1.jpg'
  import image2 from '../../assets/images/image2.jpg'
  import image3 from '../../assets/images/image3.jpg'
  import image4 from '../../assets/images/image4.jpg'
  import image5 from '../../assets/images/image5.jpg'
  import image6 from '../../assets/images/image6.jpg'
  export default {
    name: 'Home',
    data () {
      return {
        value:'', //搜索框内容
        notice:' 这是疯子阿程的测试内容，test haahh。这是疯子阿程的测试内容，test haahh。这是疯子阿程的测试内容，test haahh。',  //公告
        finished: true,
        recommendArticleList: [
          {
            title:'测试title测试测试测试测fdsfsfdsfdsfs试',
            label: 'JAVA',
            content:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
            img:image1
          },
          {
            title:'测试title测试测试测试测试',
            label: 'JAVA',
            content:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
            img:image1
          },
          {
            title:'测试title测试测试测试测试',
            label: 'JAVA',
            content:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
            img:image1
          },
          {
            title:'测试title测试测试测试测试',
            label: 'JAVA',
            content:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
            img:image1
          },
          {
            title:'测试title测试测试测试测试',
            label: 'JAVA',
            content:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
            img:image1
          },
          {
            title:'测试title测试测试测试测试',
            label: 'JAVA',
            content:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
            img:image1
          },
          {
            title:'测试title测试测试测试测试',
            label: 'JAVA',
            content:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
            img:image1
          }

        ],
        hotList:[
          {
            value: 'SpringCloud文章系列1',
            link:'/'
          },
          {
            value: 'SpringCloud文章系列2',
            link:'/'
          },
          {
            value: 'SpringCloud文章系列3',
            link:'/'
          },
          {
            value: 'SpringCloud文章系列4',
            link:'/'
          },
          {
            value: 'SpringCloud文章系列5',
            link:'/'
          }
        ],
        images:[image1,image2,image3,image4,image5,image6]
      }
    },
    components:{
    },
    computed:{

    },
    methods:{
      toSearch:()=>{
        console.info("跳转到");
      }
    },
    mounted(){
      this.$store.state.base.tabbarActive =0;
    }
  }
</script>

<style scoped lang="scss">
  @import '../../assets/scss/home';
</style>
